<!DOCTYPE html>
<html lang="cn" ng-app="deepDRapp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>DEEP DR</title>
  <link href="cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script src="cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="cdn.bootcss.com/angular.js/1.6.1/angular.min.js"></script>
  <script src="cdn.bootcss.com/angular.js/1.6.1/angular-route.min.js"></script>
  <script src="js/ng-file-upload/ng-file-upload-all.min.js"></script>
  <!--<script src="js/ng-file-upload/ng-file-upload-shim.min.js"></script>-->
  <script src="cdn.bootcss.com/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
  <link href="cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
  <link href="cdn.bootcss.com/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet">
  <script src="cdn.bootcss.com/angular-smart-table/2.1.8/smart-table.min.js"></script>

  <script src="js/index.js"></script>
  <link href="css/them.css" rel="stylesheet">

  <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
    }
  </style>
</head>
<body>


<div ng-controller="appController" data-ng-init="init()">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container ">
      <div class="navbar-header">
        <a class="navbar-brand btn">DeepDR</a>
      </div>
      <ul class="nav navbar-nav">
        <li><a class="btn" ng-click='set_menu_item("index")'>首页</a></li>
        <li><a class="btn" ng-click='set_menu_item("start")'>开始检测</a></li>
        <li><a class="btn" ng-click='set_menu_item("list")'>检测列表</a></li>
      </ul>
    </div>
  </nav>

  <div class="container theme-showcase" role="main" ng-show='menuItem == "index"'>
    <div class="jumbotron">
      <div style="text-align: center;">
        <h2>DeepDR 糖尿病眼底病变诊断系统</h2>
      </div>
      <h4 id="%E5%BC%80%E5%A7%8B%E6%96%B0%E7%9A%84%E6%A3%80%E6%B5%8B">开始新的检测</h4>
      <ol>
        <li>点击上部导航栏&#39;&#39;开始检测&#39;<br>
          <img class="doc_image" src="md_files/Screenshot from 2017-02-27 02-26-07.png"
               alt="Screenshot from 2017-02-27 02-26-07"></li>
        <li>输入患者信息<br>
          <img class="doc_image" src="md_files/Screenshot from 2017-02-27 03-14-51.png"
               alt="Screenshot from 2017-02-27 03-14-51"></li>
        <li>点击图片添加按钮添加一张或多张图片<br>
          <img class="doc_image" src="md_files/Screenshot from 2017-02-27 03-17-15.png"
               alt="Screenshot from 2017-02-27 03-17-15"></li>
        <li>等待图片上传完成,图片下方进度条显示finished,您可以继续添加图片或者删除图片<br>
          <img class="doc_image" src="md_files/Screenshot from 2017-02-27 03-18-53.png"
               alt="Screenshot from 2017-02-27 03-18-53"></li>
        <li>点击提交开始检测</li>
        <li>提交后请等待10~20秒,诊断报告将自动显示在下方<br>
          <img class="doc_image" src="md_files/Screenshot from 2017-02-27 03-21-33.png"
               alt="Screenshot from 2017-02-27 03-21-33"></li>
        <li>如果分级不准确,您可以修改分级结果并点击左下角的提交修改按钮保存修改结果</li>
      </ol>
      <h4 id="%E6%9F%A5%E7%9C%8B%E6%A3%80%E6%B5%8B%E5%88%97%E8%A1%A8">查看检测列表</h4>
      <ol>
        <li>点击上部导航栏&quot;检测列表&quot;<br>
          <img class="doc_image" src="md_files/Screenshot from 2017-02-27 03-24-53.png"
               alt="Screenshot from 2017-02-27 03-24-53"></li>
        <li>点击刷新将刷新列表<br>
          <img class="doc_image" src="md_files/Screenshot from 2017-02-27 03-25-50.png"
               alt="Screenshot from 2017-02-27 03-25-50"></li>
      </ol>
    </div>
  </div>

  <div class="container theme-showcase" ng-show='menuItem == "login"' ng-controller="login">
    <div class="wrapper">
      <form class="form-signin">
        <h2 class="form-signin-heading">Please login</h2>
        <input type="text" class="form-control" name="username" placeholder="User Name" required="" autofocus="" ng-model="user_name"/>
        <input type="password" class="form-control" name="password" placeholder="Password" required="" ng-model="psw"/>
        <label class="checkbox">
          <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
        </label>
        <button class="btn btn-lg btn-primary btn-block" ng-click="login()">Login</button>
      </form>
    </div>
  </div>


  <div class="container theme-showcase" ng-show='menuItem == "start"' ng-controller="newImage">
    <h3>添加新的图片</h3>
    <p class="help">请是输入患者相关信息，选择需要诊断的图片，点击确定开始自动诊断。
      部分报告生成时间可能较长,可以在检测记录中查看诊断进度。</p>
    <div class="panel panel-default text-center">
      <div class="panel-heading">患者信息</div>
      <div class="panel-body">
        <form id="val_info">
          <div class="input-group">
            <span class="input-group-addon">患者姓名</span>
            <input type="text" class="form-control" placeholder="姓名" ng-model="patient.name">
            <span class="input-group-addon">患者性别</span>
            <select class="selectpicker" ng-model="patient.gender">
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
            <span class="input-group-addon">患者编号</span>
            <input type="text" class="form-control" placeholder="编号" ng-model="patient.id">
            <span class="input-group-addon">患者年龄</span>
            <input type="text" class="form-control" placeholder="年龄" ng-model="patient.age">
            <span class="input-group-addon">患者视力</span>
            <input type="text" class="form-control" placeholder="视力" ng-model="patient.eye_sight">
          </div>
        </form>
      </div>
      <div class="panel panel-default text-center">
        <div class="panel-heading">病变图片</div>
        <div class="panel-body">
          <div class="row">

            <div class="col-sm-6 col-md-4" ng-repeat="pic in patient.pictures">
              <div class="thumbnail">
                <img ngf-thumbnail="pic.file || '/static/img/image-not-found.png'" class="thumb"
                     ngf-size="{width: 100%, quality: 0.9}" src="">
                <div class="progress">
                  <div class="progress-bar" role="progressbar"
                       aria-valuemin="0" aria-valuemax="100" style="width: {{pic.percentage}}%">
                    {{pic.finished?"upload finished":pic.percentage+"%"}}
                  </div>
                </div>

                <div class="caption">
                  <h5>{{pic.file.name}}</h5>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                      {{pic.which_eye == 'left' ? '左眼' : '右眼'}}
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a ng-click="pic.which_eye='left'">左眼</a></li>
                      <li><a ng-click="pic.which_eye='right'">右眼</a></li>
                    </ul>
                    <button type="button" class="btn btn-default" ng-click="delPic($index)">
                      删除
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div ngf-drop ngf-select ng-model="files" class="drop-box center"
               ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
               accept="image/*"
               ngf-pattern="'image/*,application/pdf'">点击此处或拖动文件到此处
          </div>
          <div ngf-no-file-drop>您的浏览器不支持,请联系开发者</div>
        </div>
      </div>

      <div class="btn-group" role="group">
        <a class="btn btn-default " ng-click="new_patient()"> 提 交 </a>
      </div>
    </div>
    <div class="panel panel-default" ng-show="submitted">
      <div class="panel-heading feature">
        <h4> 诊断结果 </h4>
        <div ng-show="diagnose_nready">诊断进行中,请稍后...</div>
      </div>
      <div class="panel-body">
        <div ng-repeat="row in patient.pictures" ng-show="row.result.ready">
          <table st-table class="table table-striped">
            <thead>
            <tr>
              <th st-sort="patient.name">姓名</th>
              <th st-sort="patient.gender">性别</th>
              <th st-sort="patient.age">年龄</th>
              <th st-sort="patient.eye_sight">视力</th>
              <th st-sort="patient.created_date">创建日期</th>
              <th st-sort="result.ex_area">渗出面积</th>
              <th st-sort="result.ex_ratio">渗出比例</th>
              <th st-sort="result.ha_area">出血面积</th>
              <th st-sort="result.ha_ratio">出血比例</th>
              <th st-sort="result.ma">疑似微血管瘤数目</th>
              <th st-sort="result.degree">病变分级</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>{{row.patient.name}}</td>
              <td>{{row.patient.gender}}</td>
              <td>{{row.patient.age}}</td>
              <td>{{row.patient.eye_sight}}</td>
              <td>{{row.patient.created_date}}</td>

              <td>{{row.result.ex_area}}</td>
              <td>{{row.result.ex_ratio}}</td>
              <td>{{row.result.ha_area}}</td>
              <td>{{row.result.ha_ratio}}</td>
              <td>{{row.result.ma}}</td>
              <td><input ng-model="row.result.degree"></td>
            </tr>
            </tbody>
          </table>
          <div class="row">
            <div class="thumbnail">
              <a ng-href="{{'/' + row.filename}}" target="_blank">
                <img ng-src="{{'/' + row.filename}}"
                     style="width:70%; margin: 0 auto;">
              </a>
              <div class="caption">
                <h5>原始图片</h5>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="thumbnail">
              <a ng-href="{{'/' + row.result.ex_img}}" target="_blank">
                <img ng-src="{{'/' + row.result.ex_img}}"
                     style="width:70%; margin: 0 auto;">
              </a>
              <div class="caption">
                <h5>渗出检测结果</h5>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="thumbnail">
              <a ng-href="{{'/' + row.result.ha_img}}" target="_blank">
                <img ng-src="{{'/' + row.result.ha_img}}"
                     style="width:70%; margin: 0 auto;">
              </a>
              <div class="caption">
                <h5>出血检测结果</h5>
              </div>
            </div>
            <div class="form-group">
              <label for="comment">结论:</label>
              <textarea class="form-control" rows="5" id="comment">
            {{row.result.text}}
          </textarea>
            </div>

          </div>
        </div>
      </div>
      <div class="btn btn-default" ng-click="update_change()">提交修改</div>

      <div class="panel panel-default" ng-show="debug">
        <table class="table">
          <tr>
            <th>url</th>
            <th>id</th>
            <th>which eye</th>
            <th>percentage</th>
            <th>finished</th>
          </tr>
          <tr ng-repeat="img in patient.pictures">
            <td>{{img.url}}</td>
            <td>{{img.id}}</td>
            <td>{{img.which_eye}}</td>
            <td>{{img.percentage}}</td>
            <td>{{img.finished}}</td>
          </tr>
        </table>

        <table class="table">
          <tr>
            <td>name</td>
            <td>{{patient.name}}</td>
          </tr>
          <tr>
            <td>gender</td>
            <td>{{patient.gender}}</td>
          </tr>
          <tr>
            <td>age</td>
            <td>{{patient.age}}</td>
          </tr>
          <tr>
            <td>id</td>
            <td>{{patient.id}}</td>
          </tr>
          <tr>
            <td>id</td>
            <td>{{patient.id}}</td>
          </tr>
          <tr>
            <td>eyesight</td>
            <td>{{patient.eye_sight}}</td>
          </tr>
        </table>
        Files:
        <ul>
          <li ng-repeat="f in patient.pictures">
            <img ngf-thumbnail="f || '/static/img/image-not-found.png'" class="thumb"
                 ngf-size="{width: 20, height: 20, quality: 0.9}">
            {{f.name}} {{f.$error}} {{f.$errorParam}}
          </li>
        </ul>
        Upload Log:
        <pre>{{log}}</pre>

      </div>
    </div>
  </div>


  <div ng-controller="image_list" class="container theme-showcase" role="main" ng-show='menuItem == "list"'>
    <h3>诊断列表</h3>
    <p class="help">点击刷新更新诊断列表</p>
    <div class="panel panel-default text-center">
      <div class="panel-heading">诊断列表</div>
      <div class="panel-body">
        <ul class="nav nav-tabs">
          <li role="presentation" ng-class="confirmed=='0'?'active':''" ng-click="confirmed=0; renew()"><a href="#">待审核图片</a>
          </li>
          <li role="presentation" ng-class="confirmed=='1'?'active':''" ng-click="confirmed=1; renew()"><a href="#">已审核图片</a>
          </li>
        </ul>

        <table st-table class="table table-striped">
          <tr style="font-weight: bold">
            <td>姓名</td>
            <td>编号</td>
            <td>年龄</td>
            <td>创建日期</td>
            <td>左/右眼</td>
            <td>视力</td>
            <td>渗出图片</td>
            <td>出血图片</td>
            <td>病变判断</td>
            <td>分级</td>
            <td>其他病变</td>
            <td>图片质量</td>
          </tr>
          <tr ng-repeat="row in rowCollection">
            <td>{{row.name}}</td>
            <td><a ng-href="/{{row.original_image}}" target="_blank">{{row.number}}</a></td>
            <td>{{row.age}}</td>
            <td>{{row.created_date}}</td>
            <td>{{row.which_eye=='L'? '左眼' : '右眼'}}</td>
            <td>{{row.eye_sight}}</td>
            <td><a ng-href="/{{row.ex_img}}">渗出图片</a></td>
            <td><a ng-href="/{{row.ha_img}}">出血图片</a></td>
            <!--<td><a ng-href="/{{row.ex_img}}" >{{row.ex_area*255| number:0}}</a> </td>-->
            <!--<td><a ng-href="/{{row.ha_img}}" >{{row.ha_area*255| number:0}}</a>  </td>-->
            <td>
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                  {{degree_desp[row.degree]}} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-repeat="(key, value) in degree_desp"><a
                      ng-click="change_degree($parent.$index,key)">{{value}}</a></li>
                </ul>
              </div>

            </td>
            <td>
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                  {{level_desp[row.level]}} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-repeat="(key, value) in level_desp"><a
                      ng-click="change_level($parent.$index,key)">{{value}}</a></li>
                </ul>
              </div>
            </td>
            <td>
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                  {{row.none_dr_lesion}} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-repeat="name in none_dr_lesion_desp">
                    <a ng-click="change_none_dr($parent.$index,name);">{{name}}</a>
                  </li>
                </ul>
              </div>
            </td>
            <td>
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                  {{quality_desp[row.image_quality]}} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-repeat="(key, value) in quality_desp">
                    <a ng-click="change_quality($parent.$index,key);">{{value}}</a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </table>
        <div class="btn btn-default" ng-click="renew()">
          刷新
        </div>
        <div class="btn btn-default" ng-click="confirm_result()">
          提交审核结果
        </div>
      </div>
      <nav aria-label="...">
        <ul class="pager">
          <li><a ng-click="prev_page()">Previous</a></li>
          <input type="number" ng-model="page_num" min="1" max="{{max_page}}" ng-click="renew()">
          <a>/{{max_page}}</a>
          <li><a ng_click="next_page()">Next</a></li>
          <br>
          <label>每页显示数量</label>
          <input type="number" ng-model="items_per_page" ng-change="renew()" min="1">
        </ul>
      </nav>
    </div>
  </div>

  <div ng-controller="basicsCtrl" class="container theme-showcase" role="main" ng-show='menuItem == "list__"'>
    <h3>诊断列表</h3>
    <p class="help">点击刷新更新诊断列表</p>
    <div class="panel panel-default text-center">
      <div class="panel-heading">诊断列表</div>
      <div class="panel-body">
        <button class="btn" ng-click="renew()">刷新</button>
        <table st-table class="table table-striped">
          <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>视力</th>
            <th>创建日期</th>
            <th>渗出面积</th>
            <th>渗出比例</th>
            <th>出血面积</th>
            <th>出血比例</th>
            <th>疑似微血管瘤数目</th>
            <th>病变分级</th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="row in rowCollection">
            <td><a href="{{'/' + row.result.original_img}}" target="_blank">{{row.patient.name}}</a></td>
            <td>{{row.patient.gender}}</td>
            <td>{{row.patient.age}}</td>
            <td>{{row.patient.eye_sight}}</td>
            <td>{{row.patient.created_date}}</td>
            <td><a href="{{'/' + row.result.ex_img}}" target="_blank">{{row.result.ex_area}}</a></td>
            <td>{{row.result.ex_ratio}}</td>
            <td><a href="{{'/' + row.result.ha_img}}" target="_blank">{{row.result.ha_area}}</a></td>
            <td>{{row.result.ha_ratio}}</td>
            <td>{{row.result.ma}}</td>
            <td>{{row.result.degree}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>


</body>
</html>